<template>
	<view class="shopdivination">
		<view class="banner">
			<image :src="fengshuiImgUrl"></image>
		</view>
		<view class="form">
			<!--  #ifdef H5 -->
			<input class="input" type="number"
				:maxlength="11" v-model="mobileValue" placeholder="请输入手机号码，测试报告将发到您的手机" />
			<button class="form_submit" @click="applyNow">{{ btnTxt }}</button>
			<!--  #endif -->
			<!--  #ifdef MP-WEIXIN -->
			<input type="text" class="input" v-model="communityValue"
				placeholder="请输入小区名称" />
			<input class="input" type="number" :maxlength="11" v-model="mobileValue" placeholder="请输入手机号码，测试报告将发到您的手机" />
			<get-phone-number @cbFn="prebook">
				<button class="form_submit">{{btnTxt}}</button>
			</get-phone-number>
			<!--  #endif -->
		</view>
		<view class="report">
			<view class="report_caption">风水测试报告</view>
			<view class="report_content">
				<view class="report_content_top">
					<view class="report_goal">
						<view class="report_goal_data">
							95<text>分</text>
						</view>
						<view class="report_goal_tip">户型得分</view>
					</view>
					<view class="report_comment">本户型是从东向西进入，户型朝西。不通透，室内通风不理想。整体平面比较规整，有利于内部分割，面积利用率高。买到这么好的户型，你不是土豪就是上辈子救了国。打败了96%人的户型。</view>
				</view>
				<view class="report_box">
					<view class="report_tab">
						<view class="report_tab_item" v-for="(item, index) in tabData" :key="index"
							:class="{active: index === tabIndex}" @click="switchTab(index)">{{ item }}</view>
					</view>
					<view class="report_box_item" v-if="tabIndex === 0">
						<view class="report_title">动静线</view>
						<view class="report_percent">
							<view class="report_percent_rect"></view>
							<view class="report_percent_num">44<text>/45</text></view>
						</view>
						<view class="report_text">本户型的动静线没有交叉，布局很理想，私密性能得到很好的保证。</view>
						<image :src="imgUrl+'shop/fengshui_demo1.png'" alt="" class="report_img"></image>
						<view class="report_sub_title">户型百科</view>
						<view class="report_text">室内的动静线最好不要交叉，因为动静线交叉穿越，不利于客餐厅内家具的布置和使用，也影响了休息区的私密性和安静。</view>
					</view>
					<view class="report_box_item" v-if="tabIndex === 1">
						<view class="report_title">动静分区</view>
						<view class="report_percent">
							<view class="report_percent_rect"></view>
							<view class="report_percent_num">24<text>/25</text></view>
						</view>
						<view class="report_text">本户型动静分区非常合理，静区动区是完全分开的，私密 性极佳。</view>
						<image :src="imgUrl+'shop/fengshui_demo2.png'" alt="" class="report_img"></image>
						<view class="report_sub_title">户型百科</view>
						<view class="report_text">1.动静区分开才能保障居室主人的日常生活流通顺畅，让休息的人能安心休息、走动娱乐的人可以放心活动，互不干扰。</view>
						<view class="report_text">2.如果动静分区不合理，就难以形成私密空间，居家生活会让人觉得不舒服，长期居住对居室主人的心情和健康会产生不利影响</view>
					</view>
					<view class="report_box_item" v-if="tabIndex === 2">
						<view class="report_title">采光通风</view>
						<view class="report_percent">
							<view class="report_percent_rect"></view>
							<view class="report_percent_num">27<text>/30</text></view>
						</view>
						<view class="report_text">本户型是邻侧采光通风，属于间接通风，通风一般。</view>
						<image :src="imgUrl+'shop/fengshui_demo1.png'" alt="" class="report_img"></image>
						<view class="report_sub_title">户型百科</view>
						<view class="report_text">1.一般来说，比较方正的户型具有良好的通透性能。进深过大，开间过小，则会影响户型的采光和通风，让房间显得比较暗；而进深偏小，开间过大，则不利于房间保温，浪费能源，北方尤其如此。</view>
						<view class="report_text">2.比较方正的户型能做到采光通风与保温两者间的平衡。</view>
						<view class="report_text">3.“相对两面采光”通风最佳（如南北、东西），其次是“相邻两面采光”（如东和南、南和西、西和北等），只有一面采光通风的户型效果是最差的。</view>
						<view class="report_text">4.另外，厨房和厕所是湿气比较重的两个区域，要尽量做到独立采光通风，也就是避免“暗厨”和“暗卫”。</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import { mobileReg } from '@/utils/tools/validate'
import { submitReservation } from '@/api/shop'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
import { getBasicUser } from '@/utils/auth'
export default {
	name: 'ShopDivination',
	components: {
		getPhoneNumber
	},
	data() {
		return {
			fengshuiImgUrl: this.$constant.imgUrl + 'shop/fengshui_banner.png',
			communityValue: '',
			mobileValue: '',
			tabIndex: 0,
			tabData: ['动静线', '动静分区', '采光通风'],
			intotype: '',
			user_name: '',
			owner_user_id: '',
			imgUrl: this.$constant.imgUrl,
			option: {},
			currentQuery: {},
			btnTxt: this.$constant.oemSource == 3 ? '立即计算' : '立即计算'
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getBasicUser' })
	},
	onLoad(option) {
		this.option = option
		if (option.owner_user_id) {
			this.owner_user_id = option.owner_user_id
		}
		if (this.$util.isEmpty(this.owner_user_id) || this.owner_user_id == uni.getStorageSync('user_id')) {
			return
		}
		this.prebook()
		getBasicUser(this.owner_user_id).then(res => {

		})
		// if (option.mobile) {
		// 	const wxMobile = uni.getStorageSync('wxMobile') || ''
		// 	this.mobileValue = option.mobile ? option.mobile : wxMobile
		// }
	},
	mounted() {
		// const wxMobile = uni.getStorageSync('wxMobile') || ''
		// this.mobileValue = wxMobile
		// this.intotype = this.$route.query.intotype
		// this.user_name = this.$route.query.user_name
		// this.owner_user_id = this.$route.query.owner_user_id
		// this.intotype = 'normal'
		// this.user_name = '林雪辉'
		// this.owner_user_id = 132
		// var that = this
		// setTimeout(function () {
		//     that.shareweixin()
		// }, 2000)
	},
	methods: {
		switchTab(index) {
			this.tabIndex = index
		},
		prebook() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile) {
				return
			}
			const params = {
				mobile_phone: mobile,
				prebook_source: '风水测试',
				owner_user_id: this.owner_user_id
			}
			// if (this.currentQuery.share_user_id) {
			// 	params.share_user_id = this.currentQuery.share_user_id
			// }
			// if (this.currentQuery.p_share_user_id) {
			// 	params.p_share_user_id = this.currentQuery.p_share_user_id
			// }
			submitReservation(params).then(res => {
				this.btnTxt = '提交成功'
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
			})
		},
		applyNow() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			const community = this.communityValue; const mobile = this.mobileValue
			// 	else if (community.length === 0) {
			// 	uni.showToast({
			// 		title: '请输入小区名称！',
			// 		icon: 'none'
			// 	})
			// }
			if (mobile.length === 0) {
				uni.showToast({
					title: '请输入手机号码！',
					icon: 'none'
				})
			} else if (!mobileReg.test(mobile)) {
				uni.showToast({
					title: '请输入正确的手机号码！',
					icon: 'none'
				})
			} else {
				const params = {
					mobile_phone: mobile,
					prebook_source: '风水测试',
					owner_user_id: this.owner_user_id
				}
				submitReservation(params)
					.then((res) => {
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						})
					})
			}
		}
		// ,
		//    shareweixin () {
		//   var gobacktype = this.intotype
		//   var links = ''
		//   if (gobacktype == 'Index') {
		//     links = 'person/prebook/fengshui'
		//   } else if (gobacktype == 'normal') {
		//     links = 'company/prebook/fengshui'
		//   }
		//   // 自定义分享
		//   var url = ''
		//   var imgurl = require('../../static/images/publicicon/windwater.jpg')
		//   var owner_user_id = this.$route.query.owner_user_id
		//   var puser_id = this.$route.query.share_user_id
		//   var title = '快来测下你家的风水【' + this.user_name + '】'
		//   var desc = '最齐全的户型风水数据，趋利避害，等你来测。'
		//   var userid = localStorage.getItem('user_id')
		//   if (userid == owner_user_id) {
		//     url = location.protocol + '//' + location.host + '/hkds/#/' + links + '?owner_user_id=' + this.owner_user_id + '&' + 'intotype=' + this.intotype + '&' + 'share_user_id=' + this.owner_user_id
		//   } else {
		//     url = location.protocol + '//' + location.host + '/hkds/#/' + links + '?owner_user_id=' + this.owner_user_id + '&' + 'intotype=' + this.intotype + '&' + 'share_user_id=' + userid + '&' + 'p_share_user_id=' + puser_id
		//   }
		//   var obj = {
		//     title: title, // 分享标题
		//     desc: desc, // 分享内容
		//     linkurl: url, // 分享链接
		//     img: imgurl // 分享内容显示的图片
		//   }
		//   this.$wxshare.getJSSDK(url, obj, owner_user_id, puser_id)
		// }
	},
	/**
     * 用户点击右上角分享
     */
	onShareAppMessage: function(options) {
		const shareObj = {
			title: '快来测下你家的风水【' + this.userInfo.nick_name + '】',
			path: `/pages/pagesHome/shop/ShopDivination?owner_user_id=${this.userInfo.user_id}`
		}
		return shareObj
	}
}
</script>

<style lang="scss" scope>
@import url("../../../static/css/module/shop.scss");
.shopdivination {
    background-color: #f5f5f5;
    .form {
        padding: 30px;
        background-color: #fff;
        box-sizing: border-box;
    }
}
.shopdivination .form_submit {
    margin-top: 30px;
    width: 100%;
    height: 90px;
    font-size: 36px;
    color: #fff;
    line-height: 90px;
    text-align: center;
    background: linear-gradient(to left, #ff9000, #ff6600);
    border: none;
    border-radius: 10px;
}
.shopdivination .report {
    margin-top: 20px;
    background-color: #fff;
}
.shopdivination .report_caption::before{
    left: -60px;
    background-image: url('https://wximg.meijiabang.com/hkds/miniapp/images/shop/fengshui_cloud_l.png');
}
.shopdivination .report_caption::after {
    right: -60px;
    background-image: url('https://wximg.meijiabang.com/hkds/miniapp/images/shop/fengshui_cloud_r.png');
}
.shopdivination .report_caption {
    position: relative;
    margin: auto;
    width: 260px;
    height: 100px;
    font-size: 32px;
    color: #333;
    line-height: 100px;
    text-align: center;
}

.shopdivination .report_caption::before,
.shopdivination .report_caption::after {
    content: "";
    display: block;
    position: absolute;
    top: 37px;
    width: 50px;
    height: 26px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.shopdivination .report_content_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    box-sizing: border-box;
}

.shopdivination .report_goal {
    width: 136px;
}

.shopdivination .report_goal_data {
    width: 136px;
    height: 136px;
    font-size: 60px;
    line-height: 128px;
    color: #ff9000;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #fed166;
    box-sizing: border-box;
}

.shopdivination .report_goal_data text {
    color: #999;
    font-size: 26px;
}

.shopdivination .report_goal_tip {
    margin-top: 10px;
    text-align: center;
    font-size: 26px;
    color: #333;
}

.shopdivination .report_comment {
    margin-left: 30px;
    width: 474px;
    font-size: 26px;
    color: #333;
    line-height: 42px;
}

.shopdivination .report_box {
    margin: auto;
    width: 710px;
    background-color: #fff;
    border-radius: 10px;
}

.shopdivination .report_tab {
    width: 100%;
    height: 90px;
    font-size: 0;
    border-bottom: 1px solid #ff9000; /*no*/
    box-sizing: border-box;
}

.shopdivination .report_tab_item {
    position: relative;
    display: inline-block;
    width: 33.3333%;
    height: 100%;
    font-size: 30px;
    color: #666;
    text-align: center;
    line-height: 100px;
}

.shopdivination .report_tab_item.active {
    color: #ff9000;
}

.shopdivination .report_tab_item.active::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: calc(50% - 15px);
	width: 30px;
	height: 6px;
	background-color: #ff9000;
	border-radius: 3px;
}

.shopdivination .report_box_item {
    position: relative;
    padding: 40px 30px;
    box-sizing: border-box;
}

.shopdivination .report_title {
    margin-bottom: 20px;
    font-size: 30px;
    color: #333;
    font-weight: bold;
}

.shopdivination .report_percent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 40px;
    right: 30px;
    height: 40px;
    width: 280px;
}

.shopdivination .report_percent_rect {
    position: relative;
    width: 190px;
    height: 14px;
    background-color: #ffefda;
}

.shopdivination .report_percent_rect::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    height: 100%;
    background-color: #ff9000;
}

.shopdivination .report_percent_num {
    font-size: 24px;
    color: #ff9000;
}

.shopdivination .report_percent_num text {
    color: #999;
}

.shopdivination .report_text {
    margin-bottom: 30px;
    font-size: 26px;
    color: #666;
    line-height: 42px;
}

.shopdivination .report_img {
    margin-bottom: 30px;
    width: 100%;
    height: 482px;
}

.shopdivination .report_sub_title {
    font-size: 26px;
    color: #333;
    font-weight: bold;
}
.input {
    display: block;
    width: 100%;
    padding: 20px;
    height: 90px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    & + .input {
        margin-top: 20px;
    }
    &::placeholder {
        font-size:26px;
        color:rgba(153,153,153,1);
    }
}
</style>
